<template>
  <a-card>
    <a-row style="margin-bottom:10px">
      <a-col :span="24">
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item label="品牌">
            <a-select style="width: 180px" placeholder="请选择品牌" @change="selectChange" v-model="brand" allow-clear>
              <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
              <a-select-option :value="item.value" v-for="item in brandList" :key="item.code">
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="分类名称">
            <a-input placeholder="请输入分类名称" v-model="name" allow-clear></a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" @click="resetForm" style="margin-left:10px">重置</a-button>
            <a-button type="primary" style="margin-left:10px" @click="add(null)">新增</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <a-table bordered :columns="columns" :rowKey="record => record.id" :data-source="dataSource" :pagination="pagination"
      :scroll="{ x: true }" @change="handleTableChange">
      <template slot="action" slot-scope="txt, record">
        <a class="mr-10" @click="add(record)"><a-icon type="edit" />编辑</a>
        <a class="mr-10" @click="deleteRecord(record)"><a-icon type="delete" />删除</a>
        <a @click="addDown(record,1)"><a-icon type="plus" />添加下级</a>
      </template>
      <a-table slot="expandedRowRender" slot-scope="text" :columns="columns" :data-source="text.childCategory"
        :pagination="false">
        <template slot="action" slot-scope="txt, record">
          <a class="mr-10" @click="addDown(record)"><a-icon type="edit" />编辑</a>
          <a class="mr-10" @click="deleteRecord(record)"><a-icon type="delete" />删除</a>
          <a @click="addDown(record,1)"><a-icon type="plus" />添加下级</a>
        </template>
        <a-table slot="expandedRowRender" slot-scope="text" :columns="columns" :data-source="text.childCategory"
        :pagination="false">
        <template slot="action" slot-scope="txt, record">
          <a class="mr-10" @click="addDown(record)"><a-icon type="edit" />编辑</a>
          <a class="mr-10" @click="deleteRecord(record)"><a-icon type="delete" />删除</a>
        </template>
      </a-table>
      </a-table>
    </a-table>
    <create v-if="showAdd" :category="category" @close="close"></create>
    <createDown v-if="showDown" :content="content" :type='type' @closeDown="closeDown"></createDown>

  </a-card>
</template>
<script>
import create from './create.vue'
import createDown from './addDown.vue'

// import { listMixin } from '../util/listMixin'
import { getSystemPro } from '@api/pattern/index.js'
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'

const columns = [
  {
    title: '分类名称',
    dataIndex: 'name'
  },
  {
    title: '品牌',
    dataIndex: 'brand'
  },
  {
    title: '操作',
    width: 230,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  // mixins:[listMixin],

  components: {
    create,
    createDown
  },

  data() {
    return {
      columns,
      showAdd: false,
      showDown:false,
      category: null,
      content:null,
      brand: undefined,
      brandList: [],
      urlKey: 'category',
      form: this.$form.createForm(this),
      name: '',
      type:'',
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  mounted() {
    this.getBrandList();
    this.loadData()
  },
  methods: {
    close() {
      this.showAdd = false
      this.loadData()
    },
    addDown(record,type){
      this.content = record
      this.type = type
      this.showDown = true
    },
    closeDown(){
      this.showDown = false
      this.loadData()

    },
    resetForm() {
      console.log('重置表达')
      this.brand = ''
      this.name = ''
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData()
    },
    loadData(key) {
      const params = {
        jobNumber: this.jobNumber,
        size: this.pagination.pageSize,
        type: 20
      }
      if (key) {
        params.current = this.pagination.current
      } else {
        params.current = 1
      }
      if (this.brand) {
        params.brand = this.brand;
      }
      if (this.name) {
        params.name = this.name;
      }
      postAction(`${pattern}${this.urlKey}/list`, params).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    async getBrandList() {
      const data = {
        jobNumber: this.jobNumber
      }
      const res = await getSystemPro('brand', data)
      if (res.code == 200) {
        this.brandList = res.data
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    deleteRecord(record) {
      if (!this.urlKey || this.urlKey == '') {
        return this.$message.error('请设置urlKey属性!')
      }
      this.$confirm({
        title: '确定删除吗?',
        cancelText: '暂不',
        onOk: res => {
          console.log(res)
          return new Promise((resolve, reject) => {
            postAction(`${pattern}${this.urlKey}/delete`, { id: record.id, jobNumber:this.jobNumber })
              .then(res => {
                console.log(res)
                if (res.code == 200) {
                  this.visible = false
                  // this.reCalculatePage(1)
                  this.loadData(1)
                  // this.deleteEvent(record.id)
                  this.$message.success('删除成功')
                  resolve()
                } else {
                  this.$message.success(res.msg)
                  reject()
                }
              })
              .catch(err => {
                resolve()
                console.log(err)
              })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() { }
      })
    },
    handleTableChange(pagination) {
      console.log('gaibian', pagination)
      this.pagination = pagination
      this.loadData(1)
    },
    selectChange(brand) {
      this.brand = brand
    },
    add(category) {
      this.showAdd = true
      this.category = category
    },
    toElement(categoryName) {
      this.$router.push({ path: '/patternCenter/design/element', query: { categoryName: categoryName } })
    }
  }
};
</script>

<style scoped>
.mr-10 {
  margin-right: 10px;
}
</style>